import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form, Steps, message } from 'antd'
import ContentBox from 'components/contentBox'
import Category from './com/category'
import GoodsInfo from './com/goodsInfo'
import Property from './com/property'
// import Oper from './com/oper'
import Style from './add.css'
import PropTypes from 'prop-types'

const { Step } = Steps

const steps = [
  {
    title: '选择商品分类'
  },
  {
    title: '填写商品信息'
  },
  {
    title: '填写商品属性'
  }
  // {
  //   title: '选择运营关联'
  // }
]
class Add extends Component {
  static propTypes = {
    getCategoryOptions: PropTypes.func,
    addRequest: PropTypes.any,
    addGoods: PropTypes.func,
    router: PropTypes.any,
    categoryOptions: PropTypes.any,
    categoryChildOptions: PropTypes.any,
    getCategoryChildOptions: PropTypes.func,
    authorOptionsList: PropTypes.any,
    getAuthorList: PropTypes.func,
    getConfig: PropTypes.func,
    unitList: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      current: 0
    }
    this.writeInfo = this.writeInfo.bind(this)
    this.selectCategory = this.selectCategory.bind(this)
    this.selectProperty = this.selectProperty.bind(this)
    this.selectOper = this.selectOper.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.getChildCategory = this.getChildCategory.bind(this)
  }

  // 填写商品信息
  writeInfo (params) {
    if (params.category) {
      this.setState({
        category: params.category
      })
    }
    this.setState({
      current: 1
    })
  }

  // 填写商品属性
  selectCategory () {
    this.setState({
      current: 0
    })
  }

  // 填写商品属性
  selectProperty (params) {
    if (params.goodsInfo) {
      this.setState({
        goodsInfo: params.goodsInfo
      })
    }
    this.setState({
      current: 2
    })
  }

  // 选择运营关联
  selectOper (params) {
    if (params.attributeInfo) {
      this.setState({
        attributeInfo: params.attributeInfo
      })
    }
    // this.setState({
    //   current: 3
    // })
    this.handleSubmit()
  }

  // 提交商品
  handleSubmit (paramsData) {
    const { attributeInfo } = paramsData
    const { goodsInfo, category } = this.state
    let params = Object.assign({}, goodsInfo)
    params.attributeInfo = attributeInfo
    params.imageList = attributeInfo.imageList
    params.coverImg = attributeInfo.coverImg
    params.codePath = `${category.firstCode}:${category.secondCode}`
    params.categoryCode = category.secondCode
    params.namePath = `${category.firstName}:${category.secondName}`
    delete params.attributeInfo.imageList
    delete params.attributeInfo.coverImg
    console.log('+++++', params)
    this.props.addGoods(params)
  }

  getChildCategory (id) {
    this.props.getCategoryOptions({
      parentId: id
    })
  }

  componentDidMount () {
    this.props.getCategoryOptions()
    this.props.getAuthorList()
    this.props.getConfig()
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.addRequest && nextProps.addRequest) {
      message.success('添加成功')
      window.location.href = '/goods/list'
    }
  }

  render () {
    const { current, category, goodsInfo, attributeInfo } = this.state
    const { categoryOptions = [], categoryChildOptions = [], authorOptionsList = [], unitList = [] } = this.props
    return (
      <>
        <ContentBox>
          <div className={Style['scenes-add-container']}>
            <div className={Style['steps-container']}>
              <Steps current={current}>
                {steps.map(item => (
                  <Step key={item.title} title={item.title} disabled />
                ))}
              </Steps>
            </div>
            <div>
              {
                current === 0 && <Category
                  writeInfo={this.writeInfo}
                  categoryOptions={categoryOptions}
                  categoryChildOptions={categoryChildOptions}
                  getChildCategory={this.getChildCategory}
                  category={category} />
              }
              {
                current === 1 && <GoodsInfo
                  selectCategory={this.selectCategory}
                  selectProperty={this.selectProperty}
                  category={category}
                  authorOptionsList={authorOptionsList}
                  goodsInfo={goodsInfo}
                  unitList={unitList}
                />
              }
              {
                current === 2 && <Property
                  writeInfo={this.writeInfo}
                  selectOper={this.handleSubmit}
                  attributeInfo={attributeInfo}
                />
              }
              {/* {
                current === 3 && <Oper
                  handleSubmit={this.handleSubmit}
                  authorOptionsList={authorOptionsList}
                  selectProperty={this.selectProperty} />
              } */}
            </div>
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  addRequest: state.goods.addRequest,
  categoryOptions: state.goods.categoryOptions,
  categoryChildOptions: state.goods.categoryChildOptions,
  authorOptionsList: state.goods.authorOptionsList,
  unitList: state.goods.unitList
})
const mapDispatch = dispatch => ({
  getCategoryOptions: dispatch.goods.getCategoryOptions,
  getCategoryChildOptions: dispatch.goods.getCategoryChildOptions,
  getAuthorList: dispatch.goods.getAuthorList,
  addGoods: dispatch.goods.addGoods,
  getConfig: dispatch.goods.getConfig
})
const FormAdd = Form.create()(Add)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormAdd)
)
